<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="../css/index.css">
        <title>Syba - Administration</title>
        <script type="text/javascript" src="../scripts_js/XMLHttpRequest.js"></script>
        <script type="text/javascript" src="../scripts_js/fonctions.js"></script>
        <script src="../scripts_js/jquery-1.10.0.min.js"></script>
        <script src="../scripts_js/jquery.mobile-1.3.0.js"></script>
        <script src="../scripts_js/jquery-ui.js"></script>
        <script src="../scripts_js/jquery.ui.touch-punch.js"></script>
    </head>

    <body onload="verification_session();
            recupererListePictograms();
            cacher();
            cacher2();">    
        <header>
            <a href="../generateur.html">
                <img id="home_direction" src="../images/home.png" />
            </a>
            <h1 id ="title"><span> Gestion Pictogrammes </span></h1>

            <div id="connecté">
                Bienvenue   <b id="aff_pseudo2"></b> <input type="button" id="b_deconnexion" value="deconnexion " onclick="deconnexion();"/>
            </div>
        </header>

        <nav>
            <div id="menu">
                <ul>
                    <li style="width: 20%; height: 20%;">
                        <div>
                            <p>
                                <a href="../partie_generateur/ens_gestion_picto_ajout.html">
                                    <img src="../images/add.png" alt="Pictogrammes" style="width: 20%; height: 20%;" />
                                </a>
                            </p>
                            <div  id ="aj_picto"> 
                                <p>Ajouter un pictogramme</p>
                                <p><input type ="text" size ="8" id ="cat"/> <button value="Ajouter" id="aj" onclick="ajouter_categorie();"> ajouter une catégorie </button></p>
                            </div>
                        </div>
                    </li>
                    <li style="width: 20%; height: 20%;">
                        <div>
                            <p>
                                <a href="../partie_generateur/ens_gestion_picto_aff_tous.html">
                                    <img src="../images/list.png" alt="Eleves" style="width: 20%; height: 20%;" />
                                </a>
                            </p>
                            <p>Afficher tous les pictogrammes</p>
                        </div>
                    </li>

                </ul>
                <table align ="center">
                    <tr>
                        <th>
                            <input id ="search" type="search" placeholder="Entrez un nom" name ="Rechercher"  > </th> <th><button type="submit" onclick="rechercher();
                                                                                                                              " >Rechercher </button> </th>
                    </tr>
                </table>
            </div>
            <div style="clear:both;"></div>
        </nav>
        <article>
        </article>
        <footer>
            <script type="text/javascript">
        afficherfooter();
            </script>
        </footer>
        <script type="text/javascript">
            
            
            function cacher2() {
                if (readCookie('Syba_type_personne') !== "Admin") {
                    document.getElementById('aj_picto').setAttribute('style', 'display:none;');

                }
            }

            //ajouter une catégorie de pictogramme
            function ajouter_categorie() {
               
                var nom = document.getElementById("cat").value;

                var xhr = getXMLHttpRequest();

                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)) {
                        //alert("[" + xhr.responseText + "]");
                        //callback(xhr.responseText);
                        if ((xhr.responseText === '0')) {
                            alert("La catégorie est ajoutée avec succès");
                            document.getElementById("cat").value = "";
                        }
                        else {
                            alert("Cette catégorie existe déjà");
                            document.getElementById("cat").value = "";
                        }


                    }
                };

                var fd = new FormData();
                fd.append("nom", nom);
                xhr.open('POST', "../scripts_php/picto_categorie_mysql.php", false);
                xhr.send(fd);

            }

            //Rechercher des pictogrammes dans la BD
            function rechercher() {

                var xhr = getXMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)) {
                        //alert("[" + xhr.responseText + "]");
                        //callback(xhr.responseText);
                        var docXML = xhr.responseText;
                        var listeDesPictogrammes = stringToXML(docXML);
                        construireTableauPictogrammes(listeDesPictogrammes);
                    }
                };

                var fd = new FormData();
                fd.append("nom", document.getElementById("search").value);

                xhr.open("POST", "../scripts_php/pictogramme_rechercher_tous_mes_mysql.php", false);
                xhr.send(fd);
            }

          
            //Récupérer un fichier xml contenant les pictogrammes
            function recupererListePictograms() {
                var listeDesPictogrammes;
                var xhr = getXMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)) {
                        //alert("[" + xhr.responseText + "]");
                        //callback(xhr.responseText);
                        var docXML = xhr.responseText;
                        listeDesPictogrammes = stringToXML(docXML);
                        construireTableauPictogrammes(listeDesPictogrammes);
                    }
                };
                var fd = new FormData();
                fd.append("identifiant", readCookie("Syba_id_personne"));

                xhr.open("POST", "../scripts_php/pictogram_recuperer_by_adult_mysql.php", false);
                xhr.send(fd);
            }

            //Afficher les pictogrammes
            function construireTableauPictogrammes(xml) {

                var listeDpictograms = xml.getElementsByTagName("pictogramme");
                var body = document.getElementsByTagName('article')[0];

                while (body.firstChild) {
                    body.removeChild(body.firstChild);
                }



                for (var i = 0; i < listeDpictograms.length; i++) {
                    
                    var idGet = listeDpictograms[i].getElementsByTagName("identifiant")[0].childNodes[0].nodeValue;


                    var div = document.createElement("div");
                    div.setAttribute('style', 'width:20%; height:' + window.innerHeight / 4 + '; margin-left: 4%; margin-bottom: 2%;display: inline-block;');
                    var div1 = div.appendChild(document.createElement("div"));
                    div1.setAttribute('id', 'mosaic');
                    div1.setAttribute('style', 'float: left;border: 5px black solid;  background-image:url(../imagesPicto/' + listeDpictograms[i].getElementsByTagName("image")[0].childNodes[0].nodeValue + ') ; background-position:center; background-repeat:no-repeat; background-size: 100% 100%; -webkit-background-size: 100% 100%; -o-background-size: 100% 100%; -moz-background-size: 100% 100%;width:70%; height:' + window.innerHeight / 4 + 'px; display: inline-block;');


                    var div2 = div1.appendChild(document.createElement("div"));
                    div2.setAttribute('style', 'width: 100%; height: 15%;  background-color: black; opacity:0.5; color:white; text-align:center; font-size: ' + window.innerHeight / 32 + 'px;font-weight:bold;');
                    div2.appendChild(document.createTextNode(listeDpictograms[i].getElementsByTagName("nom")[0].childNodes[0].nodeValue));

                    var div3 = div1.appendChild(document.createElement("div"));
                    div3.setAttribute('style', 'width: 70%; height: 60%;position:static; display: inline-block;');

                    var div4 = div1.appendChild(document.createElement("div"));
                    div4.setAttribute('style', 'width: 30%; height: 60%;position:static; display: inline-block;');

                    var div5 = div1.appendChild(document.createElement("div"));
                    div5.setAttribute('style', 'width: 100%; height: 25%;background-color: white; opacity:0.7; color: black; text-align: center; font-size: ' + window.innerHeight / 39 + 'px; font-weight:bold; word-wrap: break-word;');
                    div5.appendChild(document.createTextNode(listeDpictograms[i].getElementsByTagName("text")[0].childNodes[0].nodeValue));
                    body.appendChild(div);

                    var div6 = div.appendChild(document.createElement("div"));
                    div6.setAttribute('style', ' black;width:20%; height:32%; display: inline-block;');
                    var ancreImgModifier = div6.appendChild(document.createElement("a"));
                    ancreImgModifier.setAttribute('href', '../partie_generateur/ens_gestion_picto_edition.html?id=' + idGet);
                    ancreImgModifier.setAttribute('onclick', 'submit()');
                    var img = ancreImgModifier.appendChild(document.createElement("img"));
                    img.setAttribute('src', '../images/edit.png');
                    img.setAttribute('style', 'width: 100%; height: ' + window.innerHeight / 13 + 'px;');

                    var div7 = div.appendChild(document.createElement("div"));
                    div7.setAttribute('style', ' width:20%; height:32%; display: inline-block;');
                    var ancreImgSupprimer = div7.appendChild(document.createElement("a"));
                    ancreImgSupprimer.setAttribute('href', '../partie_generateur/ens_gestion_picto.html');
                    ancreImgSupprimer.setAttribute('onclick', 'deletePictogram(' + listeDpictograms[i].getElementsByTagName("identifiant")[0].childNodes[0].nodeValue + ')');
                    var img2 = ancreImgSupprimer.appendChild(document.createElement("img"));
                    img2.setAttribute('src', '../images/delete.png');
                    img2.setAttribute('style', 'width: 100%; height: ' + window.innerHeight / 13 + 'px;');

                    var div8 = div.appendChild(document.createElement("div"));
                    div8.setAttribute('style', ' width:20%; height:32%; display: inline-block;');
                    var ancreImgSupprimer = div8.appendChild(document.createElement("a"));
                    ancreImgSupprimer.setAttribute('href', '#');
                    ancreImgSupprimer.setAttribute('onclick', 'soundPictogram(' + listeDpictograms[i].getElementsByTagName("identifiant")[0].childNodes[0].nodeValue + ')');
                    var img2 = ancreImgSupprimer.appendChild(document.createElement("img"));

                    img2.setAttribute('src', '../images/sound.png');
                    img2.setAttribute('style', 'width: 100%; height: ' + window.innerHeight / 13 + 'px;');
                }
            }
            
            //Jouer le son du pictogramme
            function soundPictogram(id) {
                var xhr = getXMLHttpRequest();

                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)) {
                        // alert("[" + xhr.responseText + "]");
                        //callback(xhr.responseText);
                        var docXML = xhr.responseText;
                        var listeDesPictogrammes = stringToXML(docXML);
                        var listeDAdultes = listeDesPictogrammes.getElementsByTagName("pictogramme");
                        var audioElement2 = document.createElement('audio');
                        audioElement2.setAttribute('src', "../sonPicto/" + listeDAdultes[0].getElementsByTagName("son")[0].childNodes[0].nodeValue);
                        audioElement2.play();
                    }
                };

                var fd = new FormData();
                fd.append("identifiant", id);

                xhr.open('POST', "../scripts_php/picto_recuperer_mysql.php", false);
                xhr.send(fd);

            }
            
            //Supprimer un pictogramme
            function deletePictogram(id) {
                var r = confirm("Voulez vous supprimer ce pictogramme ? ");
                if (r === true)
                {
                    var xhr = getXMLHttpRequest();
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)) {
                            //alert("[" + xhr.responseText + "]");
                            //callback(xhr.responseText);

                            //Si le pictogramme est contenu dans une activité, impossible de le supprimer
                            if (xhr.responseText === '0') {
                                alert('Vous ne pouvez pas supprimer ce pictogramme car il est utilisé par une activité!');
                            }
                        }
                    };

                    var fd = new FormData();
                    fd.append("identifiant", id);

                    xhr.open('POST', "../scripts_php/pictogram_supprimer_mysql.php", false);
                    xhr.send(fd);
                }
            }

            function cacher() {
                if (readCookie("Syba_connexion") !== null) {

                    document.getElementById('aff_pseudo2').innerHTML = readCookie("Syba_connexion");

                }
                else {
                    document.getElementById('connecté').setAttribute('style', 'display:none;');
                }
            }
            function deconnexion() {
                eraseCookie("Syba_connexion");
                eraseCookie("Syba_id_personne");
                window.location = "../../index.html";

            }



        </script>

    </body>
</html>